<template>
    <view class="people">
      <view v-for="(item, index) in listv.data" :key="index" class="people_box">
        <view v-show="!flag" class="item_left_clickView" @click="change(item)">
          <image
            v-if="!item.clickable"
            class="item_left_click"
            src="../../../static/images/my/icon_grzy_quanxuan.png"
            mode=""
          ></image>
          <image
            v-else
            class="item_left_clickable"
            src="../../../static/images/my/icon_grzy_xc_xuanzhong.png"
            mode=""
          ></image>
        </view>
  
        <view
          class="people_item"
          :class="backBg ? 'people_item1' : ''"
          @click="toDetail(item)"
        >
          <view class="item_left">
            <image :src="item.file_url" mode=""></image>
          </view>
          <view class="item_right">
            <view class="right_text"> 
                <view class="item_right_top">
                    <view class="item_right_top_name">{{ item.name }}</view>
                    <view class="item_right_top_tab">{{item.shenfen}}</view>
                </view>
                <view class="item_right_bottom">{{item.gangyao}}</view>
                <!-- {{ item.name }}  -->
            </view>
            <u-icon name="arrow-right" color="#ADADAD"></u-icon>
          </view>
        </view>
      </view>
  
      <view class="bottom" v-show="!flag">
        <view class="bottom_left">
          <view @click="changeClick">
            <image
              v-if="!clickableAll"
              class="item_left_click"
              src="../../../static/images/my/icon_grzy_quanxuan.png"
              mode=""
            ></image>
            <image
              v-else
              class="item_left_click"
              src="../../../static/images/my/icon_grzy_xc_xuanzhong.png"
              mode=""
            ></image>
          </view>
          <view class="bottom_left_text">全选</view>
        </view>
        <view class="bottom_right" @click="deleteFn">删除</view>
      </view>
  
      <u-modal
        :show="show"
        :title="title"
        :content="content"
        confirmColor="#55B877"
        :closeOnClickOverlay="true"
        @confirm="confirm"
        @close="close"
        @cancel="cancel"
        :showCancelButton="true"
      ></u-modal>
  
      <view class="empty_view" v-if="listv.data && listv.data.length == 0">
        <image
          class="item_left_clickable"
          src="../../../static/images/my/kong.png"
          mode=""
        ></image>
        <view v-if="from == 'history'">您还没有历史记录~</view>
        <view v-else>当前没有相关数据，请查看其他分类或功能。</view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      flag: {
        type: Boolean,
        default: true,
      },
      backBg: {
        type: Boolean,
        default: false,
      },
      list:{
        type:Object,
        default:()=>{}
      },
      from: {
        type: String,
        default: "",
      },
    },
    watch: {
      list: {
        deep: true, // 深度监听每一个属性值, 如果是对象可以深度监听
        immediate: true, // 进入页面后立即自动调用handler函数
        handler(newValue) {
          this.listv = newValue;
          if (this.listv && this.listv.data) {
            for (let i = 0; i < this.listv.data.length; i++) {
              this.listv.data[i].clickable = false;
            }
          }
          console.log(this.listv, "newList");
        },
      },
    },
    data() {
      return {
        clickableAll: false,
        listv: [
          
        ],
        show: false,
        title: "确认删除",
        content: "确认删除选中内容？",
      };
    },
    methods: {
      toDetail(item) {
        console.log('itemmmm1',item);
        uni.navigateTo({
          url: `/pages/character/characterDetail?id=${item.id}`,
        });
      },
      change(item) {
          console.log('itemitem',item);
          
        this.$forceUpdate();
        item.clickable = !item.clickable;
        // 判断是否全选
        let all = true;
        for (let i = 0; i < this.listv.data.length; i++) {
          if (this.listv.data[i].clickable == false) {
            all = false;
          }
        }
        if (all) {
          this.clickableAll = true;
        } else {
          this.clickableAll = false;
        }
      },
      changeClick() {
        this.clickableAll = !this.clickableAll;
        if (this.clickableAll) {
          for (let i = 0; i < this.listv.data.length; i++) {
            this.listv.data[i].clickable = true;
          }
        } else {
          for (let i = 0; i < this.listv.data.length; i++) {
            this.listv.data[i].clickable = false;
          }
        }
      },
      confirm() {
        let arr = [];
        let num = 0;
        for (let i = 0; i < this.listv.data.length; i++) {
          if (this.listv.data[i].clickable == true) {
            arr.push(this.listv.data[i].history_id);
            num++;
          }
        }
        console.log(arr, "数组");
        this.deletFn(arr);
      },
      close() {
        this.show = false;
      },
      cancel() {
        this.show = false;
      },
      deleteFn() {
        let isTrue = true;
        for (let i = 0; i < this.listv.data.length; i++) {
          if (this.listv.data[i].clickable == true) {
            isTrue = false;
          }
        }
        if (isTrue == true) {
          uni.$u.toast("您还未选择内容");
        } else {
          this.show = true;
        }
      },
      // 删除接口
      deletFn(arr) {
        this.$http
          .historyDel_his_renwu({ ids: arr })
          .then((res) => {
            uni.$u.toast(res.message);
            this.show = false;
            setTimeout(() => {
              this.$emit("updateDataRenWu");
            }, 1000);
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .people {
    width: 100%;
    .people_box {
      display: flex;
      align-items: center;
      .item_left_clickView {
        margin-right: 24rpx;
        .item_left_click {
          width: 40rpx;
          height: 40rpx;
         
        }
        .item_left_clickable {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .people_item {
      width: 100%;
      display: flex;
      margin-top: 24rpx;
      background: #f7f8fa;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      .item_left {
        width: 166rpx;
        height: 166rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
      .item_right {
        flex: 1 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 40rpx;
        padding-right: 32rpx;
        box-sizing: border-box;
        .item_right_top{
            width: 100%;
            display: flex;
            align-items: center;
            .item_right_top_name{
                font-size: 32rpx;
                color: #444444;
            }
            .item_right_top_tab{
                // width: 92rpx;
                height: 36rpx;
                background: rgba(85,184,119,0.302);
                border-radius: 4rpx 4rpx 4rpx 4rpx;
                text-align: center;
                line-height: 36rpx;
                font-size: 24rpx;
                color: #55B877;
                padding: 5rpx 10rpx;
                margin-left: 20rpx;
            }
        }
        .item_right_bottom{
            width: 400rpx;
            font-size: 28rpx;
            color: #ADADAD;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 20rpx;
        }
      }
    }
    .people_item1 {
      background: rgba(39, 39, 39, 0.5);
      .right_text {
        color: #eeeeee;
      }
    }
    .bottom {
      width: 100%;
      height: 112rpx;
      background: #272727;
      position: fixed;
      bottom: 0;
      left: 0;
      padding: 16rpx 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .bottom_left {
        display: flex;
        align-items: center;
        .item_left_click {
          width: 40rpx;
          height: 40rpx;
        }
        .bottom_left_text {
          margin-left: 16rpx;
          color: #eeeeee;
          font-size: 30rpx;
        }
      }
  
      .bottom_right {
        width: 250rpx;
        height: 80rpx;
        background: #ee6060;
        border-radius: 48rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 30rpx;
        color: #eeeeee;
      }
    }
  
    /deep/.u-modal__content__text {
      text-align: center;
    }
  
    .empty_view {
      margin-top: 300rpx;
      image {
        margin: 0 auto;
        width: 410rpx;
        height: 410rpx;
      }
      view {
        font-size: 30rpx;
        color: #d8d8d8;
        text-align: center;
      }
    }
  }
  </style>
  